<template>
  <div class="container" v-if="detailInfo && detailInfo.task_rating_scales">
    <navigate>测评量表详情</navigate>
    <div class="task_info flex_row">
      <img
        :src="joinUrlImg(detailInfo.task_rating_scales[0].ratingScale.icon_url)"
        alt=""
        class="images"
      />
      <div>
        <div class="name">
          {{ detailInfo.task_rating_scales[0].name }}
        </div>
        <div class="scaleType">
          量表分类:{{
            detailInfo.task_rating_scales[0].ratingScale.rating_scale_type_name
          }}
        </div>
        <div class="deadline">
          <img src="@/assets/images/common/clock.png" alt="" />
          剩余次数：{{ $route.params.count }}次
        </div>
      </div>
    </div>

    <!-- 量表信息 -->
    <div class="scale_info">
      <div class="title flex_row flex_align_center">
        <div class="bar"></div>
        <div class="text">量表信息</div>
      </div>
    </div>
    <div class="scale_info_container flex_column">
      <div class="item flex_row flex_align_center between">
        <div class="label">备注任务名：</div>
        <div class="text">{{ detailInfo.name }}</div>
      </div>
      <div class="item flex_row flex_align_center between">
        <div class="label">任务发布人：</div>
        <div class="text">{{ detailInfo.task_publisher }}</div>
      </div>
      <div class="item flex_row flex_align_center between">
        <div class="label">量表总题目数：</div>
        <div class="text">
          {{
            detailInfo.task_rating_scales[0].ratingScale.questions_count + "题"
          }}
        </div>
      </div>
      <!-- <div class="item flex_row flex_align_center between">
        <div class="label">之前测过本表：</div>
        <div class="text">{{ "否" }}</div>
      </div> -->
      <div class="item flex_row flex_align_center between">
        <div class="label">答题时间限制：</div>
        <div class="text">
          {{
            detailInfo.task_rating_scales[0].ratingScale.subject_time == "0.00"
              ? "不限时"
              : detailInfo.task_rating_scales[0].ratingScale.subject_time +
                "分钟"
          }}
        </div>
      </div>
      <div class="item flex_row flex_align_center between">
        <div class="label">允许报告查看：</div>
        <div class="text">{{ authText(auth) }}</div>
      </div>
      <div class="item flex_row flex_align_center between">
        <div class="label">任务发布时间：</div>
        <div class="text">{{ formatDate(detailInfo.create_time * 1000) }}</div>
      </div>
    </div>
    <div class="user_select">
      <div class="title flex_row flex_align_center">
        <div class="bar"></div>
        <div class="text">测评用户选择</div>
      </div>
    </div>

    <div class="select_role father_relative">
      <van-field
        class="nowrap flex_row between"
        readonly
        clickable
        label="选择测试角色："
        :value="role.label"
        placeholder="请选择"
        @click="visible = true"
      />
      <van-popup v-model="visible" round position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          value-key="label"
          @cancel="visible = false"
          @confirm="onConfirm"
        />
      </van-popup>
      <img
        class="right vertical_center"
        src="@/assets/images/common/right.png"
        alt=""
      />
    </div>
    <div class="scale_introduce">
      <div class="title flex_row flex_align_center">
        <div class="bar"></div>
        <div class="text">量表简介</div>
      </div>
    </div>
    <div class="introduce">
      <div class="content">
        {{
          unflod
            ? detailInfo.task_rating_scales[0].info.introduction
            : introduceOmit(
                detailInfo.task_rating_scales[0].info.introduction
              ) + "..."
        }}
      </div>

      <div
        @click="unflod = !unflod"
        class="text flex_row flex_align_center flex_center_jc"
      >
        展开详情
        <img
          :style="{ transform: unflod ? 'rotate(180deg)' : 'rotate(0)' }"
          src="@/assets/images/common/unfold.png"
          alt=""
        />
      </div>
    </div>

    <div class="scale_know">
      <div class="title flex_row flex_align_center">
        <div class="bar"></div>
        <div class="text">测评须知</div>
      </div>
    </div>

    <div class="know">
      <div class="item">
        <span class="blue_circle"></span>
        完成本问卷答题，大约需5-10分钟的时间，建议在网络环境较好的情况下测试。
      </div>
      <div class="item">
        <span class="blue_circle"></span>
        本问卷作为学校调研使用，为保证准确性，请根据实际情况作答。
      </div>
      <div class="item">
        <span class="blue_circle"></span>
        量表结果是否有查看权限，见右侧“任务信息介绍”栏所示。如需专业报告解读，请在“测评报告--普通测评报告模块”内进行申请解读。
      </div>
    </div>

    <!-- 确认 -->
    <div class="confirm flex_row flex_align_center between">
      <div class="flex_column">
        <!-- <div class="sum">合计：<span>￥0/次</span></div> -->
        <div class="flex_row flex_align_center">
          <checkbox @getCheckboxValue="allowOperate"></checkbox>
          <div class="text">
            我已阅读并同意<span @click="show = true">《测评承诺书》</span>。
          </div>
        </div>
      </div>

      <button class="btn" @click="startEvaluate">
        {{ $route.params.trid != 0 ? "继续测评" : "开始测评" }}
      </button>
    </div>

    <letter-of-undertaking :visible="show" @close="show = $evnet" />
  </div>
</template>

<script>
import { formatDate } from "@/utils/time.js";
import selectRole from "@/mixins/selectRole.js";
import { apiGetTaskDetail, apiGetQuestion } from "@/api/task.js";
import letterOfUndertaking from "@/components/letterOfUndertaking/index.vue";
import { joinUrlImg } from "@/utils/setUrlImg";
export default {
  mixins: [selectRole],
  components: {
    letterOfUndertaking,
  },
  data() {
    return {
      // 详情信息
      detailInfo: {},
      //  同意测评
      allow: false,
      //   是否展开简介
      unflod: false,
      // 显示承诺书
      show: false,
      // 权限
      auth: "",
    };
  },
  methods: {
    joinUrlImg,
    // 获取题目
    async getAuth() {
      const { sid, rid, tid } = this.$route.params;
      const params = {
        rating_scale_id: sid,
        task_id: tid,
      };
      const { data } = await apiGetQuestion(params);
      if (data.code == 200) {
        this.auth = data.data.result_read_auth;
      }
    },
    // 获取任务详情
    async getTaskDetail() {
      const params = {
        task_id: this.$route.params.tid,
      };
      const { data } = await apiGetTaskDetail(params);
      if (data.code == 200) {
        for (let key in data.data) {
          this.$set(this.detailInfo, key, data.data[key]);
        }
      }
    },
    // 简介省略号处理
    introduceOmit(str) {
      if (str) {
        let temp = "";
        for (let i = 0; i < 92; ++i) {
          if (str[i]) {
            temp += str[i];
          } else {
            return temp;
          }
        }
        return temp;
      }
    },
    // 开始测评
    startEvaluate() {
      if (!this.role.label) return this.$toast.fail("请选择测试角色！");
      if (!this.allow) return this.$toast.fail("请同意测评！");
      const { sid, tid, trid } = this.$route.params;
      this.$router.push(`/normalAnswer/${sid}/${tid}/${this.role.id}/${trid}`);
    },
    // 允许测评
    allowOperate(val) {
      this.allow = val;
    },
    formatDate,
  },
  computed: {
    // 权限展示
    authText() {
      return (auth) => {
        const temp = auth.split(",");
        if (temp.includes("3") && temp.includes("4")) return "本人和家长";
        if (temp.includes("3") && !temp.includes("4")) return "本人";
        if (temp.includes("4") && !temp.includes("3")) return "家长";
      };
    },
  },
  created() {
    this.getAuth();
    this.getTaskDetail();
  },
};
</script>

<style lang="less" scoped>
@import "./css/index.less";
@import "../styles/common.less";
</style>
